<template>
  <div class="organization">
    <!-- 上面的部分 -->
    <div class="top">
      <div>
        <!-- 伪类部分 -->
        <div>
          <span class="top-organization">编辑机构信息</span>
        </div>
      </div>
    </div>
    <hr class="line" />
    <!-- 中间的部分 -->
    <div class="middile">
      <div>机构信息</div>
      <div style="display: flex; justify-content: space-between">
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          class="demo-ruleForm"
          :size="formSize"
          status-icon
        >
          <div
            style="
              display: flex;
              justify-content: space-between;
              text-align: left;
            "
          >
            <el-form-item label="机构编号" :style="{ width: '300px' }">
              20000
            </el-form-item>
            <el-form-item
              label="机构名称"
              prop="name"
              :style="{
                width: '300px',
              }"
            >
              <el-input v-model="ruleForm.name" />
            </el-form-item>
          </div>
          <div style="display: flex; justify-content: space-between">
            <el-form-item label="联系人姓名">
              <el-input v-model="getDataObj.contactName" />
            </el-form-item>
            <el-form-item
              label="&nbsp;&nbsp;联系电话"
              :style="{ width: '300px' }"
            >
              <el-input v-model="getDataObj.contactTel" />
            </el-form-item>
          </div>

          <el-form-item label="机构地址" prop="address">
            <el-input
              style="width: 600px"
              type="textarea"
              v-model="ruleForm.address"
            />
          </el-form-item>
          <el-form-item label=" &nbsp;&nbsp;机构介绍" prop="desc">
            <el-input
              style="width: 600px"
              type="textarea"
              v-model="getDataObj.description"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitInfo"> 保存 </el-button>
            <el-button @click="resetForm">返回</el-button>
          </el-form-item>
        </el-form>
        <div class="oganpic">
          <div style="display: flex; align-items: center">
            <span style="margin-right: 5px">机构图片</span>
            <Upload @getPicUrl="getPic" :picture="pic" :flag="true"></Upload>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部的部分 -->
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import api from '@/api/index'
import Upload from '@/components/zxy/Upload.vue'
import { useRouter } from 'vue-router'
import { onMounted } from 'vue'
import { addOrganization } from '@/types/zxy/organizationType'

// 导入状态机

import organizationStore from '@/store/zxy/organization'
import { storeToRefs } from 'pinia'

// // 接受父组件传过来的id
import { useRoute } from 'vue-router'
const route = useRoute()

// 导状态机的
const store = organizationStore()
const { info } = storeToRefs(store)
// console.log('-------------------------------------', info.value.picture)

interface RuleForm {
  name: string
  address: string
}

const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const getDataObj = ref<addOrganization>({
  contactName: '',
  picture: '',
  name: '',
  contactTel: '',
  address: '',
  description: '',
  id: '',
})

const ruleForm = reactive<RuleForm>({
  name: '',
  address: '',
})

// 必填项的规则

const rules = reactive<FormRules<RuleForm>>({
  name: [{ required: true, message: '请输入名称', trigger: 'blur' }],

  address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
})

// 获取子传过来的图片url地址,先判断状态机里面有没有图片，有的话用状态机的图，否则用新增的
if (info.value.picture) {
  getDataObj.value.picture = ''
  getDataObj.value.picture = info.value.picture
}

const getPic = (arg: string) => {
  // 将请求参数进行重新赋值
  getDataObj.value.picture = ''
  getDataObj.value.picture = arg
}

// 将传过来的id赋给getdataObj(当且仅当类型为string时候才重新赋值)
if (route.query.id && typeof route.query.id === 'string') {
  getDataObj.value.id = route.query.id
}
// 点击保存按钮时候提交信息
const submitInfo = async () => {
  getDataObj.value.name = ruleForm.name
  getDataObj.value.address = ruleForm.address
  console.log('------', getDataObj.value)
  const res = await api.organization.editOrganizationApi(getDataObj.value)
  console.log('编辑结果', res)
  router.push('jg')
}

// 点击返回时候，图片进行清空
const pic = ref({ picure: '' })

// 点击返回时候。路由跳转
const router = useRouter()

// 点击返回的函数，清空数据，给upload传递参数，图片进行清空
const resetForm = () => {
  ruleForm.address = ''
  ruleForm.name = ''
  getDataObj.value.name = ''
  getDataObj.value.contactName = ''
  getDataObj.value.contactTel = ''
  getDataObj.value.description = ''
  pic.value.picure = ''

  router.push('jg')
}

// 挂载时候获取值
onMounted(() => {
  console.log(route.query.id)
}),
  // 修改显示的值

  (ruleForm.address = info.value.address)
ruleForm.name = info.value.name

getDataObj.value.contactName = info.value.contactName
getDataObj.value.contactTel = info.value.contactTel
getDataObj.value.description = info.value.description
</script>

<style scoped>
.organization {
  width: 98%;
  height: 800px;
  margin: auto;
  background-color: #fff;
}

.top-organization::before {
  margin-left: 5px;
  margin-top: 5px;
  content: '';
  display: inline-block;
  width: 10px;
  height: 30px;
  background-color: skyblue;
  margin-right: 10px;
  border-radius: 6px;
}

.top-organization {
  font-size: 20px;
  display: flex;
  align-items: center;
}

.line {
  margin: 10px;
}
.middile {
  margin: 10px;
}

/* 图片上传 */
.oganpic {
  margin-right: 50px;
}
</style>
